import React, { useState } from 'react'
import { CameraOutline } from 'antd-mobile-icons'
import { Card, NavBar } from 'antd-mobile'
import { message, Upload } from 'antd';
import { Modal } from 'antd';
import img from '../src/img/sfz.png'
import { see } from './request/tesseract';
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
function App() {
  // 弹出图片
  const [isModalOpen, setIsModalOpen] = useState(false);

  // const handleOk = () => {
  //   setIsModalOpen(false);
  // };
  // const handleCancel = () => {
  //   setIsModalOpen(false);
  // };
  // 表单
  const onFinish = (values) => {

  }
  // 图片上传
  const props = {
    beforeUpload: file => {
      const isPNG = file.type === 'image/png';
      // 判断只能选择图片文件
      if (!isPNG) {
        message.error(`${file.name} is not a png file`);
      }
      return isPNG || Upload.LIST_IGNORE;
    },

    onChange: info => {
      setIsModalOpen(true);
      console.log(info.fileList);
     
    },
  };
  // 点击识别
  let handleup = (file) => {
    console.log('5555')
    setIsModalOpen(false);
     see(file).then(res => {
        console.log('see', res)
      })
  }
  return (
    <div style={{ background: '#eee', height: '100vh' }}>
      {/* 弹出 */}

      <Modal
        title="身份证信息"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
      // onOk={handleOk}
      // onCancel={handleCancel}
      >
        <img src={img} alt="" />

        <Button onClick={() => handleup(img)}>识别身份证</Button>
      </Modal>

      <NavBar style={{ background: '#16adb8' }}><span style={{ color: '#fff', fontWeight: 'bolder' }}>增添乘客</span></NavBar>
      {/* 上传按钮 */}
      <Upload {...props}>
        <Button style={{ width: '360px', margin: '10px', height: '40px' }} icon={<CameraOutline />}><span style={{ color: '#16adb8', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>扫描证件添加</span></Button>
      </Upload>


      <Card style={{ margin: '10px' }}>
        <Form
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
        >

          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='code'
            label='身份证'
            rules={[{ required: true, message: '身份证不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入身份证' />
          </Form.Item>


        </Form>

      </Card>
    </div>
  )
}

export default App
